import React, { Suspense, lazy } from 'react'
import { BrowserRouter as Router, Route, NavLink, Redirect, Switch } from 'react-router-dom'
import Loading from './views/loading.jsx'
const Home = lazy(() => import('./views/home.jsx'))
const About = lazy(() => import('./views/about.jsx'))

function App() {
    return (
        <div className='container'>
			<Router>
				<ul className="nav nav-pills nav-fill">
				  <li className="nav-item">
				    <NavLink className="nav-link" activeClassName="active" to="/home">HOME</NavLink>
				  </li>
				  <li className="nav-item">
				    <NavLink className="nav-link" exact activeClassName="active" to="/about">ABOUT</NavLink>
				  </li>
				</ul>
				<Switch>
					<Suspense fallback={<Loading/>}>
						<Route path='/home' component={Home} />
						<Route path='/about' component={About} />
					</Suspense>
				</Switch>
			</Router>
		</div>
    )
}

export default App